<!--
	作者：ZFJ
	时间：2017-05-06
	描述：这是登录页面
-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="./css/mui.css"/>
    <style type="text/css">
    	h1.mui-title{
    		font-weight: bold;
    	}
    	.mui-input-group{
    		margin-top:30px;
    	}
    	.mui-btn-block{
    		width: 90%;
    		margin: 40px auto;
    	}
    	.link{
    		text-align: center;
    	}
    	.link a{
    		text-decoration: none;
    		padding: 0 10px;
    	}
    	.link .reg{
    		border-right: 1px solid #ccc;
    	}
    </style>
</head>
<body>
    
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">登录</h1>
    </header>
    
    <div class="mui-content">
        <form class="mui-input-group" method="get">
	        <div class="mui-input-row">
	            <label>账号</label>
	            <input type="text" placeholder="请输入账号" id="account">
	        </div>
	        <div class="mui-input-row">
	            <label>密码</label>
	            <input type="password" placeholder="请输入密码" id="pwd">
	        </div>
	    </form>
	    <div class="btn">	    	
	        <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn">登录</button>
	        <div class="link">
	        	<a href="#" class="reg">注册账号</a>
	        	<a href="#" class="pwd">忘记密码</a>
	        </div>
	    </div>
    </div>
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">音乐列表</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">新闻列表</span>
        </a>
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </nav>
    
    <script src="./js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
    	$('#btn').on('click',function(){
    		var nametxt=$('#account').val();
    		var pwdtxt=$('#pwd').val();
    		if(nametxt!='' && pwdtxt!=''){
    			$.ajax({
    				url:'http://10.20.159.23:3000/login',
    				dataType:'json',
    				data:'username='+nametxt+'&userpwd='+pwdtxt,
    				success:function(res){
    					if (res && res.code == 0) {
    						window.sessionStorage.setItem('username',nametxt);
    						location.href = "person.html";
    					}else{
    						alert(res.message);
    					}
	    			},
	    			error:function(){
	    				alert('账号或密码错误！')
	    			}
    			})
    		}else{
    			alert('账号和密码都不能为空！');
    		}
    	})
    
    </script>
</body>
</html>
